<!--省市区控件-->
<template>
    <div class="city-wheel-wrap" :style="{visibility: (cityShow ? 'visible' : 'hidden')}" @click="hiddenCityWheel">
        <div class="city-wheel-box">
            <div class="city-wheel-top" v-if="hasTitle">
                <text class="top-txt">所在区域</text>
            </div>

            <address class="city-wheel" :province="prov" :city="city" :district="area" @click="getCityArea"></address>
        </div>
    </div>
</template>

<style scoped>
    .city-wheel-wrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
    }
    .city-wheel-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
    }
    .city-wheel-top {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 80px;
        border-bottom-width: 1px;
        border-color: #e6e6e6;
    }
    .top-txt {
        color: #313131;
        font-size: 30px;
        font-family: msyhl;
    }
    .city-wheel {
        padding-top: 15px;
        padding-left: 50px;
        padding-right: 50px;
        height: 852px;
    }
</style>

<script>

    export default{
        props: {
            cityShow: {
                type: Boolean,
                default: false,
                require: true
            },
            hasTitle: {
                type: Boolean,
                default: true
            },
            prov: { //省
                type: String,
                default: null
            },
            city: { //市
                type: String,
                 default: null,
            },
            area: { //区
                type: String,
                 default: null
            }
        },
        data(){
            return{}
        },
        methods: {
            getCityArea(event){
                let _val = event.value || {};

                this.$parent.cityShow = false;
                this.$emit("getCityArea",_val);
            },
            hiddenCityWheel(){
                this.$parent.cityShow = false;
            }
        }
    }
</script>
